<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('编码标识')" prop="code">
            <el-input v-model="form.code" :disabled="form.id !== undefined && form.id !== null && form.id !== ''" :placeholder="$t('编码标识')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('业务类型')" prop="busType">
            <el-input v-model="form.busType" :placeholder="$t('业务类型')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <el-input v-model="form.remark" type="textarea" maxlength="2000" :placeholder="$t('备注')" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div class="area-header" style="margin-top: 15px;">
          <span class="area-header-title">{{ $t('类型列表') }}</span>
        </div>
        <el-table
          :data="form.children"
          border
          class="nowrapTable formTable "
          style="overflow: auto;"
        >
          <el-table-column align="center" min-width="180px">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('业务类型') + '(busType)' }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'children.' + scope.$index + '.busType'" :rules="childrenRules.busType">
                <el-input v-model="scope.row.busType" :placeholder="$t('业务类型')" maxlength="1000" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="180px">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('类型别名') + '(busAlias)' }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'children.' + scope.$index + '.busAlias'" :rules="childrenRules.busAlias">
                <el-input v-model="scope.row.busAlias" :placeholder="$t('类型别名')" maxlength="1000" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="180px">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('值/其他') + '(busOther)' }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'children.' + scope.$index + '.busOther'" :rules="childrenRules.busOther">
                <el-input v-model="scope.row.busOther" :placeholder="$t('值/其他')" maxlength="1000" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="180px">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('备注') + '(remark)' }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'children.' + scope.$index + '.remark'" :rules="childrenRules.remark">
                <el-input v-model="scope.row.remark" :placeholder="$t('备注')" maxlength="1000" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" width="150px" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="delHandler(scope.$index)">{{ $t('删除') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addHandler">{{ $t("添加") }}</el-button>
        </div>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="file:directoryRelatedBusiness" />
    </div>
  </div>
</template>

<script>
import {
  saveDirectoryRelatedBusiness,
  getDirectoryRelatedBusiness,
  checkCode
} from '@/api/file/directoryRelatedBusiness/directoryRelatedBusiness'

export default {
  data() {
    const checkCodes = (rule, value, callback) => {
      if (value === null || value === undefined) {
        return callback(new Error(this.$t('必填信息')))
      }
      if (this.form.id === undefined || this.form.id === null || this.form.id === '') {
        checkCode(value).then(response => {
          if (response.data) {
            callback()
          } else {
            callback(new Error(this.$t('已存在,不能重复添加!')))
          }
        })
      } else {
        callback()
      }
    }
    return {
      // 表单参数
      form: {},
      // 遮罩层
      loading: false,
      // 表单校验
      rules: {
        busType: [{ required: true, trigger: 'blur', message: this.$t('必填信息') }],
        code: [{ required: true, trigger: 'blur', validator: checkCodes }],
        remark: [{ required: true, trigger: 'blur', message: this.$t('必填信息') }]
      },
      childrenRules: {
        busType: [{ required: true, trigger: 'blur', message: this.$t('必填信息') }],
        busAlias: [{ required: true, trigger: 'blur', message: this.$t('必填信息') }],
        busOther: [{ required: true, trigger: 'blur', message: this.$t('必填信息') }]
      }
    }
  },
  created() {
  },
  methods: {
    // 初始化数据
    init(data) {
      this.loading = true
      if (data != null && data.id !== undefined) {
        getDirectoryRelatedBusiness(data.id).then(response => {
          this.form = response.data
          this.loading = false
        })
      } else {
        this.reset()
        this.loading = false
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        parentId: undefined,
        code: undefined,
        busType: undefined,
        busAlias: undefined,
        busOther: undefined,
        remark: undefined,
        delFlag: undefined,
        children: []
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          var that = this
          this.$confirm('非开发人员请勿修改, 是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          }).then(() => {
            that.loading = true
            saveDirectoryRelatedBusiness(that.form).then(response => {
              if (response.code === 200) {
                that.msgSuccess(that.$t('保存成功'))
                that.closeForm()
              } else {
                that.msgError(response.msg)
              }
              that.loading = false
            })
          }).catch(() => {
          })
        } else {
          this.locationError(document)
        }
      })
    },
    addHandler() {
      const row = {
        id: undefined,
        parentId: undefined,
        busType: undefined,
        busAlias: undefined,
        busOther: undefined,
        remark: undefined
      }
      if (!(this.form.children instanceof Array)) {
        this.$set(this.form, 'children', [])
      }
      this.$nextTick(() => {
        this.form.children.push(row)
      })
    },
    delHandler(index) {
      this.form.children.splice(index, 1)
    }
  }

}
</script>
